<%@ page contentType="text/html" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

<sx:head parseContent="true" />

<sx:div id="reserveInfoTypeDIV" loadingText="Loading..." showLoadingText="true" parseContent="true" separateScripts="true" executeScripts="true" refreshOnShow="true" cssClass="yui-skin-sam">

<s:form id="frmReserveInfoType" action="reserveInfoType_execute.action" method="POST" theme="simple">
<table align="center" width="950" cellpadding="0" cellspacing="0" style="border: 1px solid #BBBBBB; margin-top: 3px">
<tr>
	<td style="color: #333333; background-image: url('images/bar_hdr.gif');
			   border-bottom: 1px solid #BBBBBB;" height="28">
		<table width="920" cellspacing="0">
		<tr>
			<td width="250" style="padding-left: 5px">Available Type of Room on &nbsp;
				<font color="#111199"><s:label key="reserve.typeofroom.find.datefrom" /></font>
			</td>
			<td width="115">
				<s:textfield id="dateFromInfoType" name="reserveInfoTypeVO.dateFrom" size="8" cssClass="iNL" onchange="validateDateFromInfoType(this)"/>
				<img style="cursor:hand" src="<s:url value='/images/calendar.gif' encode='false' includeParams='none'/>"
					 onclick="document.getElementById('dateFromInfoType').focus()">
			</td>
			<td width="55">
				<font color="#111199"><s:label key="reserve.typeofroom.find.dateto" /></font>
			</td>
			<td width="135">
				<s:textfield id="dateToInfoType" name="reserveInfoTypeVO.dateTo" size="8" cssClass="iNL" onchange="validateDateToInfoType(this)"/>
				<img style="cursor:hand" src="<s:url value='/images/calendar.gif' encode='false' includeParams='none'/>" onclick="document.getElementById('dateToInfoType').focus();"/>
			</td>
			<td width="95">
				<font color="#111111"><s:label key="reserve.typeofroom.find.typeofroom" /></font>
			</td>
			<td width="125">
				<s:select id="typeOfRoom" name="reserveInfoTypeVO.typeOfRoom" list="%{typeOfRoomList}" listKey="key" listValue="value"
						  headerKey="0" headerValue="All" cssStyle="height: 20" />
			</td>
			<td width="145">
				<sx:submit showLoadingText="false" key="reserve.typeofroom.find.button.go" indicator="reserveInfoTypeIndicator" id="btnGo"
						   formId="frmReserveInfoType" executeScripts="true" beforeNotifyTopics="/beforeSearchTypeOfRoom" targets="reserveInfoTypeDIV"
						   href="reserveInfoType_search.action" cssStyle="height: 20px; width: 55px; border: 1px solid #000000"></sx:submit>
				<img id="reserveInfoTypeIndicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
			</td>
		</tr>
		</table>
	</td>
</tr>
<%-- tr>
	<td style="color: #333333; padding-left: 7px; background-image: url('images/bar_hdr.gif');
			   border-top: 1px solid #BBBBBB; border-bottom: 1px solid #BBBBBB;" height="29">
			Available of Type of Room on <s:property value="reserveInfoTypeVO.dateFrom" /> - <s:property value="reserveInfoTypeVO.dateTo" />
	</td>
</tr --%>
<tr>
	<td valign="top">
		<table width="100%" cellspacing="0" cellpadding="0" align="center">
		<s:iterator value="reserveInfoTypeVO.resultList" status="rows">
			<s:if test="#rows.index == 0">
			<tr class="tHead">
				<td width="350px" height="22px" style="background-image: url('images/gradtblhdr.gif'); padding-left: 5px">
					<s:label key="reserve.typeofroom.list.typeofroom" />
				</td>
				<td rowspan='<s:property value="%{reserveInfoTypeVO.resultList.size + 2}"/>' valign="top">
					<div style='height:<s:property value="%{20+(reserveInfoTypeVO.resultList.size*29)+24}"/>px; 
								width:800px; background-color: #EEEEEE; border: 1px solid #EEEEEE; overflow:scroll'>
						<table width="<s:property value="%{100+((roomList.size-8)*10)}"/>%" align="left"
							   bgcolor="#999999" cellspacing="0" cellpadding="0">
						<s:iterator value="reserveInfoTypeVO.resultList" status="rows">
							<s:if test="#rows.index == 0">
								<tr class="tHead">
									<s:iterator value="roomList">
										<td width="100px" height="20px" align="center"
											style="font-size: 11px; color: #111199; border-bottom: 1px solid #CCCCCC; background-image: url('images/gradtblhdr.gif')">
											<s:property value="dateGen"/>
										</td>
									</s:iterator>
								</tr>
							</s:if>
							<tr class="tBody">
								<s:iterator value="roomList">
									<s:if test="cntRoom == null || cntRoom == 0 || cntRoom eq ''">
										<td style="font-size: 11px; color: #888888; border-bottom: 1px dashed #555555"
											nowrap="nowrap" height="29px" align="center">
												0 (<s:property value="price"/>)
										</td>
									</s:if>
									<s:else>
										<td style="font-size: 11px; border-bottom: 1px dashed #555555"
											nowrap="nowrap" height="29px" align="center" onmouseover="onMouseOverAvailable()" onmouseout="onMouseOutAvailable()"
											ondblclick="addRowAvailable('<s:property value="id"/>', '<s:property value="dateGen"/>', '<s:property value="price"/>')">
												<s:property value="cntRoom"/> (<s:property value="price"/>)
										</td>
									</s:else>
								</s:iterator>
							</tr>
						</s:iterator>
						</table>
					</div>
				</td>
			</tr>
			</s:if>
			<tr class="tBody">
				<td bgcolor="#EEEEEE" height="29px" style="border-bottom: 1px dashed #111111; padding-left: 5px">
					<s:property value="type" />
				</td>
			</tr>
		</s:iterator>
			<tr><td bgcolor="#EEEEEE" height="19px"></td></tr>
			<tr>
				<td id="tdStatus" style="font-size=10px; border-top: 1px solid #BBBBBB" colspan="2"
					bgcolor="#EEEEEE" height="19px">&nbsp;</td>
			</tr>
		</table>
	</td>
</tr>
</table>

<table align="center" width="1000" style="margin-top: 9px; background-image: url('images/top_page_bg.jpg')" cellpadding="0" cellspacing="0">
<tr>
	<td style="color: #333333; background-image: url('images/bar_hdr.gif');
			   border: 1px solid #BBBBBB; padding-left: 5px" height="28">
		Reservation Information
	</td>
</tr>
<tr>
	<td width="100%" style="padding-top: 9px; padding-bottom: 5px; padding-right: 10px" align="right">
		<table cellpadding="2" width="90%" align="center">
		<tr>
			<td class="tdInfo" width="150"><s:label key="reserve.typeofroom.info.group" /></td>
			<td align="left" width="360">
				<s:hidden id="groupId" name="reserveInfoTypeVO.groupInfoVO.groupId" />
				<s:textfield id="groupName" name="reserveInfoTypeVO.groupInfoVO.groupName" size="18" readonly="true" cssClass="iDL"/>
				<s:textfield id="groupCode" name="reserveInfoTypeVO.groupInfoVO.groupCode" size="8" readonly="true" cssClass="iDL"/>
			</td>
			<td class="tdInfo" width="150"><s:label key="reserve.typeofroom.info.type" /></td>
			<td align="left" width="180"><s:textfield id="typeName" name="reserveInfoTypeVO.groupInfoVO.groupTypeName" size="18" readonly="true" cssClass="iDL"/></td>
		</tr>
		<tr>
			<td class="tdInfo"><s:label key="reserve.typeofroom.info.address" /></td>
			<td colspan="3" align="left"><s:textfield id="address" name="reserveInfoTypeVO.groupInfoVO.fullAddress" size="80" readonly="true" cssClass="iDL"/></td>
		</tr>
		<tr>
			<td class="tdInfo"><s:label key="reserve.typeofroom.info.telephone" /></td>
			<td align="left"><s:textfield id="telephone" name="reserveInfoTypeVO.groupInfoVO.phoneNum" size="15" readonly="true" cssClass="iDL"/></td>
			<td class="tdInfo"><s:label key="reserve.typeofroom.info.mobile" /></td>
			<td align="left"><s:textfield id="mobile" name="reserveInfoTypeVO.groupInfoVO.mobileNum" size="15" readonly="true" cssClass="iDL"/></td>
		</tr>
		<tr>
			<td class="tdInfo"><s:label key="reserve.typeofroom.info.fax" /></td>
			<td align="left"><s:textfield id="fax" name="reserveInfoTypeVO.groupInfoVO.faxNum" size="15" readonly="true" cssClass="iDL"/></td>
			<td class="tdInfo"><s:label key="reserve.typeofroom.info.email" /></td>
			<td align="left"><s:textfield id="email" name="reserveInfoTypeVO.groupInfoVO.email" size="25" readonly="true" cssClass="iDL"/></td>
		</tr>
		</table>
		
		<%--img src="${pageContext.request.contextPath}/images/hidelist.jpg" onclick="javascript:addRowReserve();" style="cursor: hand">
		<a href="#" onclick="javascript:addRowReserve();"><s:label key="reserve.typeofroom.info.link.add" /></a--%>
		<input type="button" value=" Add " style="border: 1px solid #000000" onclick="addRowReserve()">
	</td>
</tr>
<tr>
	<td style="padding-bottom: 5px;">
		<table bgcolor="#000000" width="99%" align="center" cellspacing="1">
		<tr bgcolor="#FFFFFF" height="22px" style="background-image: url('images/gradtblhdr.gif')">
			<th><s:label key="reserve.typeofroom.info.link.del" /></th>
			<th><s:label key="reserve.typeofroom.info.list.no" /></th>
			<th><s:label key="reserve.typeofroom.info.list.datefrom" /> <font color="red">*</font></th>
			<th><s:label key="reserve.typeofroom.info.list.dateto" /> <font color="red">*</font></th>
			<th><s:label key="reserve.typeofroom.info.list.typeofroom" /> <font color="red">*</font></th>
			<th><s:label key="reserve.typeofroom.info.list.zone" /></th>
			<th><s:label key="reserve.typeofroom.info.list.floor" /></th>
			<th><s:label key="reserve.typeofroom.info.list.day" /></th>
			<th><s:label key="reserve.typeofroom.info.list.qty" /> <font color="red">*</font></th>
			<th><s:label key="reserve.typeofroom.info.list.rateroom" /> <font color="red">*</font></th>
			<th><s:label key="reserve.typeofroom.info.list.totalamount" /></th>
			<th><s:label key="reserve.typeofroom.info.list.breakfast" /></th>
			<th style="display:none"></td>
		</tr>
		<tbody id="reserveTable">			
		</tbody>
		<tr bgcolor="#FFFFFF">
			<td colspan="10" align="right" height="23"><s:label key="reserve.typeofroom.info.list.grandtotal" /> &nbsp; </td>
			<td align="right"><span id="grandTotalAmount"><s:property value="reserveInfoTypeVO.grandTotalAmount" /></span> &nbsp; </td>
			<td>&nbsp;</td>
		</tr>
		</table>
	</td>
</tr>
<tr style="display:none;">
    <td id="templateTypeOfRoom">
        <s:select name="colTypeOfRoomId" list="%{typeOfRoomList}" listKey="key" listValue="value" onchange="setDetailIndex(this);validateColTypeOfRoom()"/>
    </td>
</tr>
</table>

<div style="height:28px; width:100%; background:#999999; border-top: 1px solid #FFFFFF; position:fixed; bottom:0; opacity:0.9; filter:alpha(opacity=90);">
	<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td width="20%" style="padding-top: 3px; padding-left: 5px;" align="left">
			<input type="button" value=" &lt; &lt; <s:text name="reserve.typeofroom.info.button.back" /> " onclick="btnInfoTypeBackOnClick(this)" class="btn" />
			<s:hidden name="reserveInfoTypeVO.seqId" />
			<s:hidden name="reserveInfoTypeVO.serviceHeaderId" />
			<s:label key="reserve.typeofroom.confirm.back" id="msgConfirmBack" cssStyle="display:none;"/>
			<s:label key="reserve.typeofroom.confirm.skip" id="msgConfirmSkip" cssStyle="display:none;"/>
			<s:label key="reserve.typeofroom.error.manyroomrate" id="msgErrorManyRoom" cssStyle="display:none;"/>
			<s:label key="reserve.error.qtymorethanzero" id="msgQtyMorethanZero" cssStyle="display:none;"/>
			<%--
			<sx:submit showLoadingText="false" key="reserve.typeofroom.info.button.back" indicator="reserveInfoIndicator" id="btnBack" beforeNotifyTopics="/beforeBack"
			   formId="frmReserveInfoType" executeScripts="true" targets="reserveInfoTypeDIV" href="reserveInfoType_back"></sx:submit>
			--%>
		</td>
		<td width="60%" style="padding-top: 3px; padding-right: 20px;" align="center">
			<sx:submit showLoadingText="false" key="reserve.typeofroom.info.button.reserve" indicator="reserveInfoIndicator" id="btnReserve"
			   		   formId="frmReserveInfoType" executeScripts="true" targets="reserveInfoTypeDIV" cssClass="btn" cssStyle="background-color: #FFFF00; width: 88px; margin-right: 18px"
			   		   href="reserveInfoType_reserve" beforeNotifyTopics="/beforeInfoTypeReserveClick"></sx:submit>
			<sx:submit showLoadingText="false" key="reserve.typeofroom.info.button.book" indicator="reserveInfoIndicator" id="btnBook"
			   		   formId="frmReserveInfoType" executeScripts="true" targets="reserveInfoTypeDIV" cssClass="btn" cssStyle="background-color: #99FF33; width: 88px; margin-right: 18px"
			   		   href="reserveInfoType_book" beforeNotifyTopics="/beforeInfoTypeBookClick"></sx:submit>
			<sx:submit showLoadingText="false" key="reserve.typeofroom.info.button.checkin" indicator="reserveInfoIndicator" id="btnCheckin"
			   		   formId="frmReserveInfoType" executeScripts="true" targets="reserveInfoTypeDIV" cssClass="btn" cssStyle="background-color: #FF0000; color: #FFFFFF; width: 88px; margin-right: 18px"
			   		   href="reserveInfoType_checkin" beforeNotifyTopics="/beforeInfoTypeCheckinClick"></sx:submit>
			<img id="reserveInfoIndicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
		</td>
		<td width="20%" style="padding-top: 3px; padding-right: 5px;" align="right">
			<sx:submit showLoadingText="false" key="reserve.typeofroom.info.button.skip" indicator="reserveInfoIndicator" id="btnSkip" beforeNotifyTopics="/beforeSkip"
					   formId="frmReserveInfoType" executeScripts="true" targets="reserveInfoTypeDIV" href="reserveInfoType_skip" cssClass="btn"></sx:submit>
		</td>
	</tr>
	</table>
</div>

</s:form>
<br><br>
<%
    session.setAttribute("S_DATE_FIELDS", "'dateFromInfoType','dateToInfoType'");
%>
<s:url id="hiddenCalendarURL" value="hiddenCalendar.action?" />
<sx:div id="hiddenCalendarDIV" autoStart="false" parseContent="true" executeScripts="true"
        separateScripts="true" showLoadingText="false"
        href="%{hiddenCalendarURL}" refreshOnShow="true"></sx:div>
        
<s:url id="generateReserveInfoURL" value="generateReserveInfo.action?" />
<sx:div id="generateReserveInfoDIV" autoStart="false" parseContent="true" executeScripts="true"
        separateScripts="true" showLoadingText="false"
        href="%{generateReserveInfoURL}" refreshOnShow="true"></sx:div>
        
</sx:div>
